<template>
  <div class="ManageServer-page">
    <div class="header">
      <p class="title">执行端列表</p>
      <div class="form">
        <el-form
          :inline="true"
          :model="queryData"
          ref="searchForm"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="">
            <el-select v-model="queryData.ServerState" placeholder="">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="使用中" value="1"></el-option>
              <el-option label="已停用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="queryData.Serverame"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" class="el-icon-search">
              查询</el-button
            >
          </el-form-item>
          <el-button size="small" @click="onAdd" class="el-icon-document-add">
            新增</el-button
          >
        </el-form>

        <div style="display: inline-block"></div>
      </div>
    </div>

    <div class="body">
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column prop="Address" label="地址" align="center">
        </el-table-column>
        <el-table-column prop="Name" label="名称" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="ImageRoute"
          label="转出文件路径"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="ProcessingCount"
          label="待执行文件数"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="状态" width="150" align="center">
          <template v-slot="{ row }">
            <el-tag v-if="row.EnableState === 1" type="success" effect="dark"
              >使用中
            </el-tag>
            <el-tag v-else type="danger" effect="dark">已停用 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="isParticipateInAssign"
          label="是否参与分配任务"
          width="180"
          align="center"
        >
          <template v-slot="{ row }">
            <span v-if="row.isParticipateInAssign">参与分配</span>
            <span v-else>不参与分配</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="220" align="center">
          <template v-slot="{ row }">
            <el-button size="small" @click="edit(row)">编辑</el-button>
            <el-button
              v-if="row.EnableState === 0"
              type="success"
              size="small"
              @click="onStart(row)"
              >启用</el-button
            >
            <el-button v-else type="warning" size="small" @click="onStop(row)"
              >停用</el-button
            >

            <el-popconfirm title="这一段内容确定删除吗？" @confirm="confirmDel">
              <el-button
                slot="reference"
                style="margin-left: 10px"
                size="small"
                type="danger"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <div class="dialog">
      <el-dialog
        :title="title"
        :visible.sync="showDialog"
        width="35%"
        :before-close="handleClose"
      >
        <el-form :model="form" label-width="100px">
          <el-form-item label="地址：">
            <el-input
              v-model="form.Address"
              placeholder="请填写执行端地址"
              :disabled="disabled"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称：">
            <el-input
              v-model="form.Name"
              placeholder="请填写执行端名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="路径：">
            <el-input
              v-model="form.ImageRoute"
              placeholder="请填写导出文件路径"
            ></el-input>
          </el-form-item>
          <el-form-item label="分配任务：">
            <el-checkbox v-model="form.isParticipateInAssign"></el-checkbox>
          </el-form-item>
          <el-row :gutter="20" type="flex" justify="center">
            <el-col :span="11">
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="onSubmit" size="small"
                  >保存</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getServerListApi } from "@/api/ManageServer";
import { SettingApi } from "@/api/dashboard";
export default {
  data() {
    return {
      tableData: [],
      title: "新增执行端",
      showDialog: false,
      form: {
        Address: "",
        Name: "",
        ImageRoute: "",
        isParticipateInAssign: false,
      },
      total: 0,
      currentPage: 1,
      pagesize: 10,
      disabled: false,
      queryData: {
        number: 10,
        intPage: 1,
        Serverame: "",
        ServerState: "-1",
      },
    };
  },

  created() {
    this.getServerList();
  },
  methods: {
    async getServerList() {
      const res = await getServerListApi(this.queryData);
      // console.log(res);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
    async onSubmit() {
      if (this.title === "新增执行端") {
        const res = await SettingApi({
          postpara: {
            posttype: "saveServer",
          },
          ureentity: {
            Remark: this.form.Address,
            Name: this.form.Name,
            ImageRoute: this.form.AddImageRouteress,
            isParticipateInAssign: this.form.isParticipateInAssign,
          },
        });
        console.log(res);
        if (res.data === "0100") {
          this.$message.success("保存成功");
        } else {
          this.$message.error("保存失败");
        }
      } else if (this.title === "编辑执行端") {
        const res = await SettingApi({
          postpara: {
            posttype: "updateServer",
          },

          CS_ID: this.form.CS_ID,
          ImageRoute: this.form.ImageRoute,
          Name: this.form.Name,
          isParticipateInAssign: this.form.isParticipateInAssign,
        });
        console.log(res);
        if (res.data === "0100") {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      }

      this.handleClose();
    },
    onSearch() {
      this.getServerList();
    },

    confirmDel() {},
    onAdd() {
      this.title = "新增执行端";
      this.disabled = false;
      this.showDialog = true;
    },
    async edit(row) {
      this.title = "编辑执行端";
      // this.form = row;
      const res = await SettingApi({
        postpara: {
          posttype: "getServerInfo",
        },
        ServerId: row.CS_ID,
      });
      console.log(res);
      this.form = JSON.parse(res.data);
      this.disabled = true;
      this.showDialog = true;
    },
    async onStop(row) {
      const res = await SettingApi({
        postpara: {
          posttype: "DeactivateServer",
        },
        DeactivateID: row.CS_ID,
      });
      console.log(res);
      this.getServerList();
    },
    async onStart(row) {
      const res = await SettingApi({
        postpara: {
          posttype: "ActivateServer",
        },
        ActivateID: row.CS_ID,
      });
      console.log(res);
      this.getServerList();
    },
    handleClose() {
      this.form = {
        Address: "",
        Name: "",
        ImageRoute: "",
        isParticipateInAssign: false,
      };
      this.disabled = false;
      this.showDialog = false;
      this.getServerList();
    },
    handleSizeChange(val) {
      // ! 每页条数
      console.log(val);
      this.queryData.number = val;
      this.getServerList();
    },
    handleCurrentChange(val) {
      // ! 当前页
      console.log(val);
      this.queryData.intPage = val;
      this.getServerList();
    },
  },
};
</script>

<style lang="scss" scoped>
.ManageServer-page {
  background-color: #fff;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    // border-bottom: 1px solid #ccc;
    .title {
      font-size: 20px;
    }

    .form {
      padding-top: 20px;
      padding-right: 20px;
    }
  }

  .body {
    padding: 50px 10px;
  }

  .dialog {
  }
}
</style>
